<template>
  <div>
    <div
      :class="$style.item"
      :style="{
        borderBottom: hasBorder ? '1px solid #DFDFDF' : 'none',
        backgroundImage: iconUrl,
        backgroundSize: iconSize
      }">
      <p :class="$style.txt">{{ text }}</p>

      <div :class="$style.operation">
        <div
          v-if="canClose"
          :class="$style.canclose">
          <input
            type="checkbox"
            :class="$style.switch"
            v-model="enable"
            @click="reqSet">
        </div>

        <div
          v-else
          :class="$style.cantclose">
          无法关闭哦
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import RemoteDAO from '../tools/remoteDAO'
  import utils from '../tools/utils'
  import {mapActions} from 'vuex'

  export default {
    data () {
      return {
        status: 1,  // 开关是否可点击状态 0：不可点击 1： 可点击
        enable: this.enabledSet
      }
    },

    props: {
      enabledSet: {
        type: Boolean,
        default: true
      },
      userCode: {
        type: String
      },
      name: {     // 返回给后台的此消息类型名称 如：'JY_DIRECTION'
        type: String
      },
      text: {
        type: String
      },
      hasBorder: {
        type: Boolean,
        default: true
      },
      icon: {
        type: String
      },
      iconWidth: {
        type: String,
        default: '20'
      },
      iconHeight: {
        type: String,
        default: '20'
      },
      canClose: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      enabledSet: function (val) {
        this.enable = val
      }
    },

    computed: {
      iconUrl () {
        return `url(${require(`@/assets/icons/${this.icon}@2x.png`)})`
      },

      iconSize () {
        return `${this.iconWidth}px ${this.iconHeight}px`
      }
    },

    methods: {
      ...mapActions(['setSettingEnable']),
      reqSet () {
        if (this.status === 1) {
          this.status = 0
          let params = {
            msgType: this.name,
            funcType: (this.enable === true ? 'enable' : 'disable'),
            userCode: utils.getUserCode
          }
          RemoteDAO.updateUserConfig(params)
          .then(res => {
            console.warn(res)
            if (res.data.body.header.resultCode === '1') {
              this.reqSuccess()
            } else {
              this.reqFail()
            }
          }, err => {
            console.warn(err)
            this.reqFail()
          })
        } else {
          return false
        }
      },
      reqSuccess () {
        this.setSettingEnable({
          name: this.name,
          value: this.enable
        })
        this.status = 1
      },
      reqFail () {
        setTimeout(() => {
          this.$BMessage.show('设置失败')
          this.enable = !this.enable
          this.status = 1
        }, 500)
      }
    }
  }
</script>

<style module lang="less">
  .item {
    background-color: #FFF;
    display: flex;
    height: 63px;
    line-height: 63px;
    background-position: 11px 50%;
    background-repeat: no-repeat;
  }

  .txt {
    margin: 0;
    padding-left: 41px;
    font-size: 14px;/*no*/
    color: #999;
    flex: 1;
  }

  .canclose {
    padding-right: 12px;
  }

  .cantclose {
    font-size: 12px;/*no*/
    color: #999;
    padding-right: 12px;
  }

  .switch {
    width: 50px;
    height: 24px;
    box-sizing: border-box;
    appearance: none;
    margin-top:19.5px;
    display: flex;
    border: 1px solid #DFDFDF;/*no*/
    background-color: #FFF;
    border-radius: 3px;
    align-items: center;
    &::after {
      content: "";
      width: 25px;
      height: 20px;
      border-radius: 3px;
      background-color: #999;
      transition: all 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    }

    &:checked::after {
      transform: translateX(21px);
      background-color: #33A9F4;
    }
  }


</style>
